<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        padding: 50px;
    }
    
    .mydiv {
        height: 300px;
        width: 300px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
    }
    /* 网格 */
    
    .case1 {
        background: white;
        background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0), linear-gradient( rgba(200, 0, 0, .5) 50%, transparent 0);
        background-size: 30px 30px;
    }
    
    .case2 {
        background: #58a;
        background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0);
        background-size: 30px 30px;
    }
    
    .case3 {
        background: #58a;
        background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0), linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
        background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
    }
    /* 波点 */
    /* 目前为止，我们一直在用线性渐变生成图案。但是，径向渐变同样也是
非常实用的，因为它允许我们创建圆形、椭圆，或是它们的一部分。径向渐
变能够创建的最简单的图案是圆点的阵列 */
    
    .case4 {
        background: #655;
        background-image: radial-gradient(tan 30%, transparent 0);
        background-size: 30px 30px;
    }
    /* 别着急，我们可以生成两层
圆点阵列图案，并把它们的背景定位错开，这样就可以得到真正的波点图案
了 */
    
    .case5 {
        background: #655;
        background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
        background-size: 30px 30px;
        background-position: 0 0, -15px -15px;
    }
    /* 棋盘 */
    
    .case6 {
        background: #eee;
        background-image: linear-gradient(45deg, #bbb 25%, transparent 0);
        background-size: 30px 30px;
    }
    
    .case7 {
        background: #eee;
        background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0);
        background-size: 30px 30px;
    }
    /* 乍看起来，这样的效果似乎并不是我们想要的。但是，我们只需要把第
二层渐变在水平和垂直方向均移动贴片长度的一半，就可以把它们拼合成一
个完整的方块： */
    
    .case8 {
        background: #eee;
        background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0);
        background-position: 0 0, 15px 15px;
        background-size: 30px 30px;
    }
    
    .case9 {
        background: #eee;
        background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0), linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0);
        background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
        background-size: 30px 30px;
    }
    /* 其实这段代码还可以
稍稍优化，比如我们可以把这些处在贴片顶角的三角形两两组合起来（即把
第一组和第二组合并为一层渐变，把第三组和第四组合并为一层渐变），然
后还可以把深灰色改成半透明的黑色——这样我们只需要修改底色就可以改
变整个棋盘的色调，不需要单独调整各层渐变的色标了： */
    
    .case10 {
        background: #eee;
        background-image: linear-gradient(45deg, red 25%, transparent 0, transparent 75%, green 0), linear-gradient(45deg, red 25%, transparent 0, transparent 75%, green 0);
        background-position: 0 0, 15px 15px;
        background-size: 30px 30px;
    }
    /* ！”其实，对于现
代浏览器来说，我们可以把SVG 文件以data URI 的方式内嵌到样式表中，
甚至不需要用base64 或URLencode 来对其编码： */
    
    .case11 {
        background: #eee url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="100" height="100" \
fill-opacity=".25">\
<rect x="50" width="50" height="50" /> \
<rect y="50" width="50" height="50" /> \
</svg>');
        background-size: 30px 30px;
    }
</style>

<body>
    <div class="mydiv case1"></div>
    <div class="mydiv case2"></div>
    <div class="mydiv case3"></div>
    <div class="mydiv case4"></div>
    <div class="mydiv case5"></div>
    <div class="mydiv case6"></div>
    <div class="mydiv case7"></div>
    <div class="mydiv case8"></div>
    <div class="mydiv case9"></div>
    <div class="mydiv case10"></div>
    <!-- svg -->
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">
      <rect x="50" width="50" height="50" />
      <rect y="50" width="50" height="50" />
    </svg>
    <div class="mydiv case11"></div>
</body>

</html>